<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>圆形倒计时</title>
	<style>
		#box{
			position:relative;
			width:50px;
			height:50px;
			background:#ccc;
			border-radius:50%;
			overflow:hidden;
		}
		#box:after{
			position:absolute;
			content: attr(data-content);
			top:50%;
			left:50%;
			transform:translate(-50%,-50%);
			color:#000;
			font-size:0.7em;
			z-index:1000
		}
		.side{
			position:absolute;
			top:50%;
			left:50%;
			transform:translate(-50%,-50%);
			z-index:999;
			background-color:#fff;
			width:47px;
			height:47px;
			border-radius:50%;
		}
		.inside{
			position:absolute;
			top:0;
			right:0;
			width:25px;
			height:50px;
			z-index:9;
			background:#ffb457;
			border-radius:0 50% 50% 0;
			transform-origin: left center;
			animation: myRotateSide 2.5s linear 0s forwards;
		}
		@-webkit-keyframes myRotateSide /* Safari 和 Chrome */
		{
		0%   {transform:rotate(-180deg);}
		100% {transform:rotate(0deg);}
		}
		.half-side{
			position:absolute;
			top:0;
			left:0;
			width:25px;
			height:50px;
			z-index:99;
			background:#ccc;
			border-radius:50% 0 0 50%;
			transform-origin: right center;
			animation: myRotateHalf 2.5s linear 2.5s forwards;
		}
		@-webkit-keyframes myRotateHalf /* Safari 和 Chrome */
		{
		0%   {transform:rotate(180deg);background:#ffb457;}
		100% {transform:rotate(360deg);background:#ffb457;}
		}
	</style>
 </head>
	
 <body>
	<div id="box" data-content="跳过">
		<div class="side"></div>
		<div class="inside"></div>
		<div class="half-side"></div>
	</div>

 </body>
 <script>
	var time = 5;
	var timer = setInterval(function(){
		time--;
		//document.getElementById("box").setAttribute("data-content",time);
		if(time===0)
		window.clearInterval(timer);
	},1000)
 </script>
</html>
